<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-borderless"
      router
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :default-openeds="openeds"
    >
      <el-menu-item
        v-if="false"
        @click="$emit('login')"
      >
        <i class="el-icon-key"></i>
        <span>登入 / 注销</span>
      </el-menu-item>

      <el-submenu
        index="group-supervisor"
        v-if="right >= 1"
      >
        <template slot="title">
          <i class="el-icon-bell"></i>
          <span slot="title">值班管理</span>
        </template>
        <el-menu-item index="/Dashboard/Concern">
          <i class="el-icon-reading"></i>
          <span slot="title">值班前准备</span>
        </el-menu-item>
        <el-submenu index="group-present">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span>值班中记录</span>
          </template>
          <el-menu-item index="/LiveRecord/Correct">
            <!-- <i class="el-icon-s-opportunity"></i> -->
            <i class="el-icon-chat-dot-round"></i>
            <span slot="title">现场纠偏</span>
          </el-menu-item>
          <el-menu-item index="/LiveRecord/Rectify">
            <i class="el-icon-view"></i>
            <span slot="title">现场纠违</span>
          </el-menu-item>
          <el-menu-item index="/LiveRecord/Inspect">
            <i class="el-icon-edit-outline"></i>
            <span slot="title">现场检查</span>
          </el-menu-item>
        </el-submenu>

        <el-menu-item index="/Dashboard/State">
          <i class="el-icon-reading"></i>
          <span slot="title">值班后总结</span>
        </el-menu-item>
      </el-submenu>
      <!-- >其它记录 -->
      <el-submenu
        index="group6"
        v-if="false"
      >
        <template slot="title">
          <i class="el-icon-files"></i>
          <span>其它记录</span>
        </template>
        <el-menu-item index="/BatchRecord/Review">
          <i class="el-icon-camera"></i>
          <span slot="title">录像 / 监控</span>
        </el-menu-item>
        <el-menu-item index="/BatchRecord/Exam">
          <i class="el-icon-document-checked"></i>
          <span slot="title">考核记录</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu
        index="group-retraining"
        v-if="right >= 1"
      >
        <template slot="title">
          <i class="el-icon-receiving"></i>
          <span slot="title">复训记录</span>
        </template>
        <el-menu-item index="/Retraining/AddRecord">
          <i class="el-icon-document-add"></i>
          <span slot="title">添加记录</span>
        </el-menu-item>
      </el-submenu>
      <!-- >数据管理 -->
      <el-submenu
        index="group-data"
        v-if="right >= 1"
      >
        <template slot="title">
          <i class="el-icon-monitor"></i>
          <span>数据管理</span>
        </template>
        <el-submenu index="group-data-rectify">
          <template slot="title">
            <i
              class="el-icon-folder"
              v-show="openeds.indexOf('group-data-rectify') === -1"
            ></i>
            <i
              class="el-icon-folder-opened"
              v-show="openeds.indexOf('group-data-rectify') > -1"
            ></i>
            <span>纠违记录</span>
          </template>
          <el-menu-item index="/Summary/Rectify">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>
          <el-menu-item index="/Query/Rectify">
            <i class="el-icon-search"></i>
            <span slot="title">数据检索</span>
          </el-menu-item>
        </el-submenu>

        <el-submenu index="group-data-inspect">
          <template slot="title">
            <i
              class="el-icon-folder"
              v-show="openeds.indexOf('group-data-inspect') === -1"
            ></i>
            <i
              class="el-icon-folder-opened"
              v-show="openeds.indexOf('group-data-inspect') > -1"
            ></i>
            <span>检查记录</span>
          </template>
          <el-menu-item index="/Summary/Inspect">
            <i class="el-icon-pie-chart"></i>
            <span slot="title">数据统计</span>
          </el-menu-item>

          <el-menu-item index="/Query/Inspect">
            <i class="el-icon-search"></i>
            <span slot="title">数据检索</span>
          </el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu
        index="group-setting"
        v-if="right >= 1"
      >
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统设置</span>
        </template>
        <el-menu-item
          index="/Management/SecurityData"
          v-if="right >= 2"
        >
          <i class="el-icon-user"></i>
          <span slot="title">人员信息</span>
        </el-menu-item>
        <el-menu-item
          index="/Management/ItemData"
          v-if="right >= 2"
        >
          <i class="el-icon-s-unfold"></i>
          <span slot="title">项目设置</span>
        </el-menu-item>
        <el-menu-item
          index="/Management/Password"
          v-if="right >= 1"
        >
          <i class="el-icon-lock"></i>
          <span slot="title">修改密码</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="group-documents">
        <template slot="title">
          <i class="el-icon-collection"></i>
          <span>项目文档</span>
        </template>
        <el-menu-item index="/Documents/Changelog">
          <i class="el-icon-paperclip"></i>
          <span>更新日志</span>
        </el-menu-item>
        <el-menu-item index="/Documents/TODO">
          <i class="el-icon-paperclip"></i>
          <span>TODO</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <responsePanel v-if="false" />
  </div>
</template>

<script>
  import responsePanel from "./responsePanel.vue";
  export default {
    components: {
      responsePanel,
    },
    data() {
      return {
        openeds: [
          "group-supervisor",
          "group-present",
          "group-data",
          "group-data-inspect",
          "group-data-rectify",
          "group-setting",
          "group-documents",
          "group-retraining",
        ],
      };
    },
    computed: {
      right() {
        if (this.$store.state.login.status == -1) return 0;
        let level = this.$store.state.login.userbase.level;
        if (level) return level;
        return 0;
      },
    },
    methods: {
      handleOpen(index, indexPath) {
        this.openeds.push(index);
        console.log(index, indexPath);
      },
      handleClose(index, indexPath) {
        this.openeds.splice(this.openeds.indexOf(index), 1);
        console.log(index, indexPath);
      },
      handleSelect(index, indexPath) {
        console.log(index, indexPath);
        this.$emit("selected");
      },
    },
  };
</script>

<style scoped>
  .el-menu-borderless {
    border: none;
  }
</style>